<!--ktv商铺 KTVShop-->
<template>
  <div class="admin-body">
    <el-row>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item >KTV商铺管理</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <el-row style="padding: 15px">

      <el-row class="main">
        <el-row  style="min-height: 40px;display: flex;">
          <el-col  style="margin-bottom: 5px;" align="left">
            <el-input v-model="key" clearable style="width: 300px;" placeholder="输入关键词查询" class="kz_search">
              <el-button slot="append" type="primary"  @click="getstart()">搜索</el-button>
            </el-input>
          </el-col>
          <el-col  style="margin-bottom: 5px;" align="right">
            <el-button type="primary" @click="add()" style="">添加KTV</el-button>
          </el-col>
        </el-row>
        <!--表格-->
        <el-table
          select-on-indeterminate
          ref="multipleTable"
          border
          align="left"
          :data="tableData">
          <el-table-column
            type="index"
            label="序号"
            width="50">
          </el-table-column>
          <el-table-column
            prop="name"
            label="KTV店铺名称"
          width="96">
          </el-table-column>
          <el-table-column
            prop="logo"
            label="店铺Logo">
            <template slot-scope="scope">
              <el-popover
                v-if="scope.row.logo"
                placement="bottom"
                trigger="hover">
                <div style="height: 300px;overflow-y: auto">
                  <img v-for="i in scope.row.logo.split(',')" :src="i" alt="" width="300px" style="display: block">
                </div>
                <!--<el-button slot="reference" size="small" type="text">查看图片</el-button>-->
                <img slot="reference" :src="scope.row.logo.split(',')[0]" alt="" width="60px" height="60px">
              </el-popover>
              <span v-if="!scope.row.logo">无</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址">
            <template slot-scope="scope">
              <el-popover
                placement="bottom"
                trigger="click">
                <div style="max-width: 300px;max-height: 300px;overflow-y: auto">{{scope.row.address}}</div>
                <div slot="reference" style="width: 100%;overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">
                  {{scope.row.address}}</div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            prop="phone"
            label="联系电话">
          </el-table-column>
          <el-table-column
            prop="license"
            label="营业执照">
            <template slot-scope="scope">
              <el-popover
                v-if="scope.row.license"
                placement="bottom"
                trigger="hover">
                <div style="height: 300px;overflow-y: auto">
                  <img v-for="i in scope.row.license.split(',')" :src="i" alt="" width="300px" style="display: block">
                </div>
                <img slot="reference" :src="scope.row.license.split(',')[0]" alt="" width="60px" height="60px">
              </el-popover>
              <span v-if="!scope.row.license">无</span>
            </template>
          </el-table-column>
          <el-table-column
            label="创建时间">
            <template slot-scope="scope">
              {{formatDate(scope.row.addtime)}}
            </template>
          </el-table-column>
          <el-table-column
            prop="business_hours"
            label="营业时间"
             width="100">
          </el-table-column>
          <el-table-column
            label="包房详情">
            <template slot-scope="scope">
            <el-button  @click="details(scope.row,1)"  style="" size="small" type="text">
              查看
            </el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="vr_url"
            label="VR链接">
          </el-table-column>
          <el-table-column
            prop="tips"
            label="温馨提示">
          </el-table-column>
          <el-table-column
            label="商城详情">
            <template slot-scope="scope">
              <el-button  @click="details(scope.row,2)"  style="" size="small" type="text">
                查看
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            label="KTV活动">
            <template slot-scope="scope">
              <el-button  @click="details(scope.row.activity,3)"  style="" size="small" type="text">
                查看
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            label="评论详情">
            <template slot-scope="scope">
              <el-button  @click="details(scope.row,4)"  style="" size="small" type="text">
                查看
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            label="订单详情">
            <template slot-scope="scope">
              <el-button  @click="details(scope.row,5)"  style="" size="small" type="text">
                查看
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="状态">
            <template slot-scope="scope">
             <span :style="{color:pdlx1(scope.row.state)}">{{pdlx(scope.row.state)}}</span>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <el-row style="margin-top: 20px">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" align="right">
            <el-pagination
              style="text-align: right;margin-bottom:70px;"
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="dataTotal">
            </el-pagination>
          </el-col>
        </el-row>
      </el-row>
    </el-row>
    <el-dialog title="新增" :visible.sync="addVisible" width="360px" :modal-append-to-body="false">
      <el-form :model="adddata" :rules="addrules" ref="adddata">
        <el-form-item label="商铺账号：" :label-width="formLabelWidth" prop="account">
          <el-input v-model="adddata.account" clearable></el-input>
        </el-form-item>
        <el-form-item label="商铺密码：" :label-width="formLabelWidth" prop="password">
          <el-input v-model="adddata.password" clearable></el-input>
        </el-form-item>
        <el-form-item label="商铺名称：" :label-width="formLabelWidth" prop="user_name">
          <el-input v-model="adddata.name" clearable></el-input>
        </el-form-item>
        <el-form-item label="商铺地址："  :label-width="formLabelWidth" prop="address">
          <el-input
            placeholder="请选择地址"
            v-model="adddata.address">
            <i @click="openmap" slot="suffix" class="el-input__icon el-icon-location" style="font-size: 20px;color: #409eff;"></i>
          </el-input>
        </el-form-item>
        <el-form-item label="联系电话：" :label-width="formLabelWidth" prop="phone">
          <el-input  v-model="adddata.phone"  clearable></el-input>
        </el-form-item>
        <el-form-item label="营业执照：" :label-width="formLabelWidth" prop="license">
          <my-upload ref="my_upload" @change="SuccessUpload" ></my-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="SubmitAdd()">确 定</el-button>
        <el-button @click="addVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="选择位置" :visible.sync="addressVisible" width="80%" :modal-append-to-body="false">
      <el-col   style="padding-left: 20px;">
        <div style="position: absolute;top: 80px; right: 20px;z-index: 999999;">
          <el-input placeholder="请输入位置搜索关键字" v-model="searchValue" clearable id="search_id"></el-input>
        </div>
        <div id="container" class="cmap" ></div>
        <span >您选择的位置：{{addresss}}</span>
      </el-col>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="okAddress()" >确 定</el-button>
        <el-button @click="addressVisible = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="活动详情" :visible.sync="restVisible" width="500px" :modal-append-to-body="false">
      <el-image
        style="width: auto; height: auto"
        :src="restImg"
        :preview-src-list="restData">
      </el-image>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="restVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import MyOneUpload from '../../components/MyOneUpload'
  import MyUpload from '../../components/MyUpload'
  export default {
    name: "KTVShop",
    components:{
      MyUpload,
    },
    mounted() {
      // if (!this.$store.state.login.in) {
      //   this.$router.push({name: "login", params: {userId: 123}})
      // }
      this.getstart()
      // this.loadmap()
    },
    data() {
      return {
        pageSize: 10,
        page: 1,
        dataTotal: 0,
        tableData:[],
        addVisible:false,
        formLabelWidth:'100px',
        adddata:{
          name:'',
          addresss:'',
          lat:'',
          lng:'',
          phone:'',
          license:'',
          account:'',
          password:'',
        },
        addrules:{
          account: [
            {required: true, message: '请输入账号', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'}
          ],
          license: [
            {required: true, message: '请上传营业执照', trigger: 'blur'}
          ],
          phone: [
            {required: true, message: '请输入联系电话', trigger: 'blur'}
          ],
          lng: [
            {required: true, message: '请选择经度', trigger: 'blur'}
          ],
          lat: [
            {required: true, message: '请选择维度', trigger: 'blur'}
          ],
          addresss: [
            {required: true, message: '请输入地址', trigger: 'blur'}
          ],
          name: [
            {required: true, message: '请输入店铺名称', trigger: 'blur'}
          ],
        },
        searchValue:'',
        addresss:'',
        map:'',
        marker:'',
        position:'',
        geocoder:'',
        addressVisible:false,
        editVisible:false,
        editdata:{
        },
        editrules:{

        },
        restVisible:false,
        restImg:'',
        restData:[],
        restdata:{
          new_password:'',
          platform_id:'',
        },
        restrules:{
          new_password: [
            {required: true, message: '请输入新密码', trigger: 'blur'}
          ],
        },
        key:'',
      }
    },
    computed:{
      userdata(){
        return this.$store.state.login.user
      }
    },
    methods: {
      pdlx(type){
        let dateArr = ['不正常','正常','删除','冻结',];
        return dateArr[type]
      },
      pdlx1(type){
        let dateArr = ['black','#409EFF','red','red',];
        return dateArr[type]
      },
      SuccessUpload(res){
        this.adddata.license = res
        console.log(this.adddata.license)
      },
      okAddress(){
       this.adddata.addresss = this.addresss
        this.addressVisible = false
      },
      openmap(){
        this.addressVisible = true
        setTimeout(()=>{
          this.loadmap()
        },200)
      },
      //地图初始化
      loadmap(){
        console.log('2')
        let thi = this
        let map = new AMap.Map('container', {
          zoom: 12
        });
        thi.map=map

        // 搜索功能
        AMap.plugin(['AMap.Autocomplete','AMap.PlaceSearch'],function(){
          var autoOptions = {
            // 城市，默认全国
            city: "北京",
            // 使用联想输入的input的id
            input: "search_id"
          }
          var autocomplete= new AMap.Autocomplete(autoOptions)
          var placeSearch = new AMap.PlaceSearch({
            city:'北京',
            map:map
          })
          AMap.event.addListener(autocomplete, 'select', function(e){
            //TODO 针对选中的poi实现自己的功能
            placeSearch.search(e.poi.name)
          })
        })
        let position=map.getCenter();
        let marker = new AMap.Marker({
          position: position
        });
        marker.setMap(map);
        let geocoder = new AMap.Geocoder({
          radius: 1000,
          extensions: "all"

        });
        thi.geocoder=geocoder;
        thi.position= position
        thi.marker= marker
        AMap.event.addListener(map, 'mapmove', function () {
          thi.position = map.getCenter();
          marker.setPosition( thi.position);

        });
        AMap.event.addListener(map, 'moveend', function () {
          thi.changePosition();
        });
      },
      changePosition(){
        let thi = this
        let position = thi.position
        let geocoder = thi.geocoder
        let marker = thi.marker
        geocoder.getAddress(position, function(status, result) {
          if(status==='complete' && result.info==='OK') {
            var province=result.regeocode.addressComponent.province;
            var city=result.regeocode.addressComponent.city;
            var addresss=result.regeocode.formattedAddress;

            thi.adddata.address = addresss;
            var address=addresss.replace(province,'');
            address=address.replace(city,'');
            var content='<div style="text-align:center;width:220px;padding:4px;overflow:hidden">';
            content+='<div style="font-size:14px;font-weight:bold;white-space:normal;margin-left: 20px; "">'+address+'</div></div>';
            marker.setLabel({
              content: content
            });
            console.log(position)
            thi.adddata.lat = position.lat
            thi.adddata.lng = position.lng
          }
        });
      },
      edit(data){
        console.log(data)
        this.editdata = JSON.parse(JSON.stringify(data))
        this.editdata.user_name = data.name
        this.editdata.platform_id = data.platform_id
        this.editVisible = true
      },
      restPassword(id){
        this.restVisible = true
        this.restdata.platform_id = id
      },
      SubmitEdit(){
        let thi = this
        thi.editdata.permission = thi.$store.state.login.user.permission
        thi.mySubmit('edit', thi.editdata).then(function (code) {
          if (code==200) {
            thi.editVisible = false
            thi.getstart()
          }
        })
      },
      SubmitAdd(){
        let thi = this
        console.log(thi.adddata)
        if (thi.adddata.account == '' || thi.adddata.password == '' || thi.adddata.address == ''
          || thi.adddata.license == '' || thi.adddata.lat == '' || thi.adddata.lng == ''
          || thi.adddata.name == '' || thi.adddata.phone == ''){
          thi.$message({
            message: '请上传完整信息！',
            type: 'error',
          });
          return false
        }
        thi.adddata.permission = thi.$store.state.login.user.permission
        thi.mySubmit('addShop', thi.adddata).then(function (code) {
          if (code==200) {
            thi.addVisible = false
            thi.getstart()
          }
        })
      },
      SubmitRest(){
        let thi = this
        if (thi.restdata.new_password == ''){
          thi.$message({
            message: '请输入新密码！',
            type: 'error',
          });
          return false
        }
        thi.mySubmit('rPassWord', thi.restdata).then(function (code) {
          if (code==200) {
            thi.restVisible = false
            thi.getstart()
          }
        })
      },
      details(data,n){
        this.$store.state.login.ktvShopData = data
        if (n == 1){
          this.$router.push({name:'privateRoomDetail'})
        } else if (n == 2) {
          this.$router.push({name:'shoppingMallDetail'})
        }else if (n == 3) {
          this.restImg = data
          this.restData[0] = data
          this.restVisible = true
        }else if (n == 4) {
          this.$router.push({name:'comment'})
        }else {
          this.$router.push({name:'kTVOrder'})
        }


      },
      add(){
        this.addVisible = true
      },
      //绑定表格数据，分页
      getstart() {
        let thi = this
        const prams = {
          page:thi.page,
          pageSize:thi.pageSize,
          key:thi.key,
        }
        thi.mySelectAll('shopList',prams).then(function (value) {
          thi.tableData = value.data
          thi.dataTotal = value.Total
        })
      },

      //选择展示数量
      handleSizeChange(val) {
        this.pageSize = val
        this.getstart()
      },
      //分页
      handleCurrentChange(val) {
        this.page = val
        this.getstart()
      },
      //状态改变提示
      changeMes(id, state) {
        var heeh = '该'
        var caozuo = '禁用'
        if (id.length > 1) {
          heeh = '这些'
        }
        if (state == 0) {
          caozuo = '删除'
        }
        let thi = this
        thi.$confirm('此操作将'+caozuo + heeh+'平台', '是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        }).then(() => {
          thi.submitState(id,state)
        }).catch(() => {
          thi.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      //删除
      submitState(id,state) {
        let thi = this
        const por = {
          platform_id: id,
          state: state,
        }
        console.log(por)
        thi.mySubmit('platformState', por).then(function (code) {
          if (code == 200) {
            thi.getstart()
          }
        })
      },
    }
  }

</script>

<style scoped>
  .main {
    background-color: white;
    min-height: 500px;
    padding: 10px;
    border: #EDEDED 1px solid;
    border-radius: 5px;
  }
  .el-row{
    /*防止页面抖动*/
    width: calc(100% - 2px) !important;
  }
  .cmap{
    width: 100%;
    height: 400px;
    margin-bottom: 10px;
  }
  .search-cont{
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 999999;
  }
  .mapTxt {
    text-align: center;
    width: 220px;
    padding: 4px;
    overflow: hidden;
    font-size: 14px;
    font-weight: bold;
    white-space: normal;
    margin-left: 40px;
    margin-top: 40px;
  }
</style>
